<script setup lang="ts">
import { sendcode, resetpassword } from '@/services/login'
import { defineAsyncComponent, ref } from 'vue'
const MyCaptchaDialog = defineAsyncComponent(() => import('@/components/my-captcha/dialog.vue'))
const formsms = ref({
  mobile: '',
  codeId: '',
  code: '',
  newPassword: '',
  confirmPassword: '',
  captchaId: '',
  track: '',
})
const register = ref()
const CaptchaDialogRef = ref()
const getCodeText = ref('获取验证码')
const getCodeisWaiting = ref(false)
const getCode = () => {
  if (getCodeisWaiting.value) {
    return
  }
  if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formsms.value.mobile)) {
    //校验手机号码是否有误
    uni.showToast({
      title: '请填写正确手机号码',
      icon: 'none',
    })
    return false
  }
  register.value?.open()
  //刷新滑块拼图
  CaptchaDialogRef.value?.refresh()
}
const onregister = async (data: any) => {
  setTimeout(async () => {
    register.value?.close()
    getCodeText.value = '发送中...' //发送验证码
    getCodeisWaiting.value = true
    formsms.value = { ...formsms.value, captchaId: data.captchaId, track: data.track }
    const res = await sendcode(formsms.value)
    if (res.success) {
      formsms.value.codeId = res.data
      uni.showToast({
        title: '验证码已发送',
        icon: 'none',
      }) //弹出提示框
      setTimer() //调用定时器方法
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'error',
      })
    }
    //示例用定时器模拟请求效果
    //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
  }, 1000)
}
const setTimer = () => {
  let holdTime = 60 //定义变量并赋值
  getCodeText.value = '重新获取(60)'
  //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
  //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
  let timer = setInterval(() => {
    if (holdTime <= 0) {
      getCodeisWaiting.value = false
      getCodeText.value = '获取验证码'
      clearInterval(timer) //清除该函数
      return //返回前面
    }
    getCodeText.value = '重新获取(' + holdTime + ')'
    holdTime--
  }, 1000)
}
const reset = async () => {
  const res = await resetpassword(formsms.value)
  if (res.success) {
    uni.showToast({
      title: '修改成功',
      icon: 'none',
    }) //弹出提示框
    uni.navigateBack()
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    }) //弹出提示框
  }
}
</script>

<template>
  <view class="viewport">
    <view class="login">
      <view class="username">
        <view class="get-code" @click.stop="getCode()">{{ getCodeText }}</view>
        <input v-model="formsms.mobile" class="input" type="text" placeholder="请输入手机号码" />
      </view>
      <input v-model="formsms.code" class="input" type="text" placeholder="请输入验证码" />
      <input
        v-model="formsms.newPassword"
        class="input"
        type="text"
        password
        placeholder="请输入新密码"
      />
      <input
        v-model="formsms.confirmPassword"
        class="input"
        type="text"
        password
        placeholder="请再次输入新密码"
      />
      <button @tap="reset" class="button phone">重置密码</button>
    </view>
    <uni-popup ref="register" type="dialog">
      <MyCaptchaDialog ref="CaptchaDialogRef" @ok="onregister" />
    </uni-popup>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

.username {
  position: relative;

  .get-code {
    position: absolute;
    height: 80rpx;
    font-size: 26rpx;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    padding: 0 40rpx;
    z-index: 3;

    &:after {
      //点击以后，左边出现白色的线
      content: ' ';
      width: 1upx; //宽度为1upx
      height: 50upx; //高度为50upx
      background-color: #fff; //背景颜色为白色
      position: absolute;
      z-index: 3;
      margin-right: 100%;
      left: 0;
      top: 20upx;
    }
  }
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
}

.logo {
  flex: 1;
  text-align: center;

  image {
    width: 220rpx;
    height: 220rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;

  .input {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    border: 1px solid #ddd;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #1e9fff;
  }

  .wechat {
    background-color: #06c05f;
  }

  .extra {
    flex: 1;
    padding: 60rpx 70rpx 0;

    .caption {
      width: 440rpx;
      line-height: 1;
      border-top: 1rpx solid #ddd;
      font-size: 26rpx;
      color: #999;
      position: relative;

      text {
        transform: translate(-40%);
        background-color: #fff;
        position: absolute;
        top: -12rpx;
        left: 50%;
      }
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 70rpx;

      button {
        padding: 0;
        background-color: transparent;

        &::after {
          border: none;
        }
      }
    }

    .icon {
      font-size: 24rpx;
      color: #444;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 6rpx;
        font-size: 40rpx;
        border: 1rpx solid #444;
        border-radius: 50%;
      }
    }

    .icon-weixin::before {
      border-color: #06c05f;
      color: #06c05f;
    }
  }
}

@keyframes animate__shakeY {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -5rpx);
  }

  100% {
    transform: translate(0, 0);
  }
}

.animate__shakeY {
  animation: animate__shakeY 0.2s ease-in-out 3;
}

.button-privacy-wrap {
  position: relative;

  .button-opacity {
    opacity: 0;
    position: absolute;
    z-index: 1;
  }
}

.tips {
  position: absolute;
  bottom: 80rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;

  .radio {
    transform: scale(0.6);
    margin-right: -4rpx;
    margin-top: -4rpx;
    vertical-align: middle;
  }

  .link {
    display: inline;
    color: #1e9fff;
  }
}
</style>
